<style type="text/css" >
select{
  width: 150px;
}
#edit-actor-content{
  width: 98%;
  background: #FFF;
  display: block;
  border: 1px inset #888;
  padding: 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
#edit-actor-content label{
  display: inline-block;
  text-align: left;
  width: 100px;
  margin: 0px 5px 5px 5px;
  vertical-align: top;
}
.actor-input-wide{
  display: inline-block;
  width: 255px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #FFF;
  background: #FFF;
  padding: 1px 2px;
  vertical-align: top;
  margin-bottom: 3px;
  min-height: 16px;
}
.actor-input-narrow{
  display: inline-block;
  width: 125px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #FFF;
  background: #FFF;
  padding: 1px 2px;
  vertical-align: top;
  margin-bottom: 3px;
  min-height: 16px;
}
.teditable{
  min-height: 32px;
}
.close-button{
  background: #f00;
  float:right;
  padding: 2px 4px 0px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
  font-family: arial;
}
#edit-actor-head{
  display:block;
  width: 98%;
  background: #1E4262;
  color: #FFF;
  padding: 5px;
  border: 1px solid #1E4262;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
.validation-errors{
  color: #F00;
  padding: 5px;
}
#valid-error{
  display: block;
  margin:0px 0px 5px 10px;
}
.required-field{
  color: #F00;
}
.actor-info-set{
  background: #EFEFEF;
  border: 1px inset #888;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
input{
  border: 0px;
}

#actor-details-used-in{ 
  z-index: 101; 
  position: absolute;
  /*float: right;*/
  width: 220px; 
  display: none; 
} 

</style>
<script type="text/javascript">
$(document).ready(function(){
   $('#actor-used-in').click(function(){
	    $('#facade').css('height',$(document).height());
	    $('#facade').css('display','block');
        var aid = $('#actor-id').val();
        $.ajax({
          url: '/matter/actor-used-in',
          type: 'POST',
          data: { aid:aid },
          success: function(data){
            $('#actor-details-used-in').empty();
            offset = $('#actor-details-popup').offset();
            left_position = $('#actor-details-popup').width() + offset.left + 5;
            top_position = offset.top;
            $('#actor-details-used-in').css('top', top_position);
            $('#actor-details-used-in').css('left', left_position);
            $('#actor-details-used-in').html(data);
            $('#actor-details-used-in').css("display", "block");
            $('#facade').css('display','none');            
          }
        });
  });

    $.editable.addInputType('autocomplete', {
                element : $.editable.types.text.element,
                plugin : function(settings, original){
                  $('input', this).autocomplete(settings.autocomplete);
          }
    });

    $('.editable').editable('/matter/update-actor', {
          submitdata: function(value,settings){
                     var actor_id = $('#actor-id').val();
                     var field_name = $(this).attr('id');
                     return { actor_id : actor_id , field : field_name}
                },
          placeholder: '...',
          select : true,
          indicator : '<span class="icon-busy" />',
          tooltip: 'Click to edit...',
          data: function(value, settings){
              return $("<div/>").html(value).text();
          }
    });
    $('.teditable').editable('/matter/update-actor', {
          submitdata: function(value,settings){
                     var actor_id = $('#actor-id').val();
                     var field_name = $(this).attr('id');
                     return { actor_id : actor_id , field : field_name }
                },
          type: 'textarea',
          placeholder: '...',
          select : true,
          indicator : '<span class="icon-busy" />',
          tooltip: 'Click to edit...',
          submit: 'ok',
          cancel: 'cancel',
          data: function(value, settings){
               var tval = value.replace(/(<br>)*/g, '');
               return $("<div/>").html(tval).text();
          }
    });
    $('.select-editable').editable('/matter/update-actor', {
          submitdata: function(value,settings){
                     var actor_id = $('#actor-id').val();
                     var field_name = $(this).attr('id');
                     return { actor_id : actor_id , field : field_name}
                },
          data: { <?php foreach($this->enumOpts as $key => $value){ echo "'".$value."' : '".$value."',"; }?> },
          type: 'select',
          placeholder: '...',
          select : true,
          indicator : '<span class="icon-busy" />',
          tooltip: 'Click to edit...',
          submit: 'ok',
          cancel: 'cancel'
    });

var fvalue = '';
var dvalue = '';
    $('.auto-editable').editable('/matter/update-actor', {
        type: 'autocomplete',
        onblur: 'submit',
        autocomplete: {
          minLength : 0,
          source : "/matter/get-non-actors",
          autoFocus: true,
          select: function( event, ui ) {
            $(this).val(ui.item.value);
            fvalue = ui.item.id;
            dvalue = ui.item.value;
            var valid = true;
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val( "" );
              fvalue = "";
              dvalue = "";
              input.data( "autocomplete" ).term = "";
              return false;
            }
            return true;
          }
        },
        submitdata: function(value,settings){
             var actor_id = $('#actor-id').val();
             var field_name = $(this).attr('id');
             return { actor_id : actor_id, field : field_name, value: fvalue, dvalue: dvalue };
           },
           placeholder: '...',
           indicator : '<span class="icon-busy" />',
           tooltip: 'Click to edit...',
           select: true
    });

    $('.nationality-editable').editable('/matter/update-actor', {
        type: 'autocomplete',
        onblur: 'submit',
        autocomplete: {
          minLength : 0,
          source : "/matter/get-country-codes",
          autoFocus: true,
          select: function( event, ui ) {
            $(this).val(ui.item.value);
            fvalue = ui.item.id;
            dvalue = ui.item.value;
            var valid = true;
            alert(ui);
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val( "" );
              fvalue = "";
              dvalue = "";
              input.data( "autocomplete" ).term = "";
              return false;
            }
            return true;
          }
        },
        submitdata: function(value,settings){
             var actor_id = $('#actor-id').val();
             var field_name = $(this).attr('id');
             return { actor_id : actor_id, field : field_name, value: fvalue, dvalue: dvalue };
           },
           placeholder: '...',
           indicator : '<span class="icon-busy" />',
           tooltip: 'Click to edit...',
           select: true
    });


    $('.country-editable').editable('/matter/update-actor', {
        type: 'autocomplete',
        onblur: 'submit',
        autocomplete: {
          minLength : 0,
          source : "/matter/get-country-codes",
          autoFocus: true,
          select: function( event, ui ) {
            $(this).val(ui.item.value);
            fvalue = ui.item.id;
            dvalue = ui.item.value;
            var valid = true;
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val( "" );
              fvalue = "";
              dvalue = "";
              input.data( "autocomplete" ).term = "";
              return false;
            }
            return true;
          }
        },
        submitdata: function(value,settings){
             var actor_id = $('#actor-id').val();
             var field_name = $(this).attr('id');
             return { actor_id : actor_id, field : field_name, value: fvalue, dvalue: dvalue };
           },
           placeholder: '...',
           indicator : '<span class="icon-busy" />',
           tooltip: 'Click to edit...',
           select: true
    });
    $('.role-editable').editable('/matter/update-actor', {
        type: 'autocomplete',
        onblur: 'submit',
        autocomplete: {
          minLength : 0,
          source : "/matter/get-actor-roles",
          autoFocus: true,
          select: function( event, ui ) {
            $(this).val(ui.item.value);
            fvalue = ui.item.id;
            dvalue = ui.item.value;
            var valid = true;
            if ( !ui.item ) {
              var matcher = $.ui.autocomplete.escapeRegex( $(this).val() );
              valid = false;
              ui.item.each(function(value) {
                if ( value.match( matcher ) ) {
                  valid = true;
                  return true;
                }
              });
            }
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val( "" );
              fvalue = "";
              dvalue = "";
              input.data( "autocomplete" ).term = "";
              return false;
            }
            return true;
          }
        },
        submitdata: function(value,settings){
             var actor_id = $('#actor-id').val();
             var field_name = $(this).attr('id');
             return { actor_id : actor_id, field : field_name, value: fvalue, dvalue: dvalue };
           },
           placeholder: '...',
           indicator : '<span class="icon-busy" />',
           tooltip: 'Click to edit...',
           select: true
    });

    $('input[name=phy_person]').change(function(){
        var actor_id = $('#actor-id').val();
        $.ajax({
          url: '/matter/update-actor',
          type: 'POST',
          data: { actor_id : actor_id, field : 'phy_person', value: $('input[name=phy_person]:checked').val()},
          success: function(data){}
        });
    });
    $('input[name=small_entity]').change(function(){
        var actor_id = $('#actor-id').val();
        $.ajax({
          url: '/matter/update-actor',
          type: 'POST',
          data: { actor_id : actor_id, field : 'small_entity', value: $('input[name=small_entity]:checked').val()},
          success: function(data){}
        });
    });

    $('.delete-actor').click(function(){
	    var del_conf = confirm("Deleting Actor from table. Are you sure?");
		if(del_conf == 1){
	    	var aid = $(this).attr('id');
	    	$.ajax({
	      	url : '/matter/delete-actor',
	      	type: 'POST',
	      	data: { aid:aid },
	      	success: function(data){
	        	if(isNaN(parseInt(data)))
	          		alert(data); 
	        	else 
		        	location.reload();     
          	}
			});
		}
	    return false;
  });

    $('.close-button').click(function(){
        $('#actor-details-popup').css('display', 'none');
        $('#actor-details-used-in').css('display', 'none');
        $('#facade').css('display','none');
    });
    
    $( "button, input:button" ).button();

});
</script>

<div id="edit-actor-head">
Actor Information <span class="close-button">X</span>
</div>
<div id="edit-actor-content">
<input type="hidden" name="actor_id" id="actor-id" value="<?=$this->actor['ID']?>" />
<fieldset class="actor-info-set" >
<legend>Actor details</legend>
<label for="name" title="<?=$this->actorComments['name']?>" >Name <span class="required-field">*</span></label>
<span class="actor-input-wide editable" id="name"><?=htmlentities($this->actor['name'])?></span>
<label for="first_name" title="<?=$this->actorComments['first_name']?>" >Firstname</label>
<span class="actor-input-narrow editable" id="first_name" ><?=htmlentities($this->actor['first_name'])?></span>
<label for="display_name" title="<?=$this->actorComments['display_name']?>" >Display name</label>
<span class="actor-input-wide editable" id="display_name" ><?=$this->actor['display_name']?></span>
<label for="login" title="<?=$this->actorComments['login']?>" >Login</label>
<span class="actor-input-narrow editable" id="login" ><?=$this->actor['login']?></span>
<label for="default_role" title="<?=$this->actorComments['default_role']?>" >Default role</label>
<span class="actor-input-wide role-editable" id="default_role" ><?=$this->actor['drole_name']?></span>
<label for="function" title="<?=$this->actorComments['function']?>" >Function</label>
<span class="actor-input-narrow editable" id="function" ><?=$this->actor['function']?></span>
<label for="Employer" title="<?=$this->actorComments['company_ID']?>" >Employer</label>
<span class="actor-input-wide auto-editable" id="company_ID" ><?=htmlentities($this->actor['company_name'])?></span>
<label for="parent_company" title="<?=$this->actorComments['parent_ID']?>" >Parent company</label>
<span class="actor-input-narrow auto-editable" id="parent_ID" ><?=$this->actor['parent_name']?></span>
<label for="WorkSite" title="<?=$this->actorComments['site_ID']?>" >Work site</label>
<span class="actor-input-wide auto-editable" id="site_ID" ><?=$this->actor['site_name']?></span>
<label for="phy_person" title="<?=$this->actorComments['phy_person']?>" >Physical person</label>
<span class="actor-input-narrow opt-editable" id="phy_person" ><input type="radio" name="phy_person" value="1" <?php echo ($this->actor['phy_person'])? 'checked="checked"' : ""; ?> />YES&nbsp;&nbsp;<input type="radio" name="phy_person" value="0" <?php echo ($this->actor['phy_person'])? '' :'checked="checked"'; ?> />NO</span>
<label for="nationality" title="<?=$this->actorComments['nationality']?>" >Nationality</label>
<span class="actor-input-wide country-editable" id="nationality" ><?=$this->actor['nationality_name']?></span>
<label for="small_entity" title="<?=$this->actorComments['small_entity']?>" >Small entity</label>
<span class="actor-input-narrow opt-editable" id="small_entity"><input type="radio" name="small_entity" value="1" <?php echo ($this->actor['small_entity'])? 'checked="checked"' : ""; ?> />YES&nbsp;&nbsp;<input type="radio" name="small_entity" value="0" <?php echo ($this->actor['small_entity'])? '' :'checked="checked"'; ?> />NO</span>
</fieldset>
<fieldset class="actor-info-set" >
<legend >Contact details</legend>
<label for="address" title="<?=$this->actorComments['address']?>" >Address</label>
<span class="actor-input-wide teditable" id="address" ><?=nl2br(htmlentities($this->actor['address']))?></span>
<label for="country" title="<?=$this->actorComments['country']?>" >Country</label>
<span class="actor-input-narrow country-editable" id="country" ><?=$this->actor['country_name']?></span>
<label for="address_mailing" title="<?=$this->actorComments['address_mailing']?>" >Address mailing</label>
<span class="actor-input-wide teditable" id="address_mailing" ><?=nl2br(htmlentities($this->actor['address_mailing']))?></span>
<label for="country_mailing" title="<?=$this->actorComments['country_mailing']?>" >Country mailng</label>
<span class="actor-input-narrow country-editable" id="country_mailing" ><?=$this->actor['country_mailing']?></span>
<label for="address_billing" title="<?=$this->actorComments['address_billing']?>" >Address billing</label>
<span class="actor-input-wide teditable" id="address_billing" ><?=nl2br(htmlentities($this->actor['address_billing']))?></span>
<label for="country_billing" title="<?=$this->actorComments['country_billing']?>" >Country billing</label>
<span class="actor-input-narrow country-editable" id="country_billing" ><?=$this->actor['country_billing']?></span>
<label for="email" title="<?=$this->actorComments['email']?>" >Email</label>
<span class="actor-input-wide editable" id="email" ><?=$this->actor['email']?></span>
<label for="phone" title="<?=$this->actorComments['phone']?>" >Phone</label>
<span class="actor-input-narrow editable" id="phone" ><?=$this->actor['phone']?></span>
<label for="phone2" title="<?=$this->actorComments['phone2']?>" >Phone 2</label>
<span class="actor-input-wide editable" id="phone2" ><?=$this->actor['phone2']?></span>
<label for="fax" title="<?=$this->actorComments['fax']?>" >Fax</label>
<span class="actor-input-narrow editable" id="fax" ><?=$this->actor['fax']?></span>
</fieldset>
<fieldset class="actor-info-set">
<legend>Other details</legend>
<label for="pay_category" title="<?=$this->actorComments['pay_category']?>" >Pay category</label>
<span class="actor-input-wide select-editable" id="pay_category" ><?=$this->actor['pay_category']?></span>
<label for="VAT_number" title="<?=$this->actorComments['VAT_number']?>" >VAT no.</label>
<span class="actor-input-narrow editable" id="VAT_number" ><?=$this->actor['VAT_number']?></span>
<label for="notes" title="<?=$this->actorComments['notes']?>" >Notes</label>
<span class="actor-input-wide teditable" id="notes" ><?=$this->actor['notes']?></span>
<button title="Actor used in" id="actor-used-in" style="float: right; margin-top: 10px">Used in<span class="ui-icon ui-icon-arrowthick-1-e" style="float: right;"></span></button>
<button title="Delete actor" class="delete-actor" id="<?=$this->actor['ID']?>" style="float: right; margin-top: 10px; margin-right: 16px;"><span class="ui-icon ui-icon-trash" style="float: left;"></span>Delete</button>
</fieldset>

<input type="hidden" value="" id="Employer-id" name="Employer-id"/>
<input type="hidden" value="" id="parent_company-id" name="parent_company-id"/>
<input type="hidden" value="" id="WorkSite-id" name="WorkSite-id"/>
<input type="hidden" value="" id="country-code" name="country-code"/>
<input type="hidden" value="" id="country_mailing-code" name="country_mailing-code"/>
<input type="hidden" value="" id="country_billing-code" name="country_billing-code"/>
<input type="hidden" value="<?=$this->actor['default_role']?>" id="default_role-code" name="default_role-code"/>

</div>
<div id="actor-details-used-in"></div>
